import React from 'react';
import { Card, List, Tag, Typography, Button, Space } from 'antd';
import { EditOutlined, EyeOutlined } from '@ant-design/icons';
import { HotItemBase } from '../../../types/hotRadar';
import './style.css';

const { Text, Title } = Typography;

interface PlatformColumnProps {
  platform: string;
  items: HotItemBase[];
  platformName: string;
  platformIcon?: string;
  platformColor?: string;
  onViewItem?: (item: HotItemBase) => void;
  onCreateContent?: (item: HotItemBase) => void;
}

// 平台配置
const platformConfig = {
  weibo: { name: '微博', icon: '🗲', color: '#ff6b6b' },
  zhihu: { name: '知乎', icon: '🧠', color: '#0084ff' },
  toutiao: { name: '头条', icon: '📰', color: '#ff4757' },
  baidu: { name: '百度', icon: '🔍', color: '#2d8cf0' },
  xiaohongshu: { name: '小红书', icon: '📝', color: '#ff3838' },
  douyin: { name: '抖音', icon: '🎵', color: '#000000' },
  bilibili: { name: '哔哩哔哩', icon: '📺', color: '#00a1d6' },
  weixin: { name: '微信', icon: '💬', color: '#07c160' }
};

export const PlatformColumn: React.FC<PlatformColumnProps> = ({
  platform,
  items,
  onViewItem,
  onCreateContent,
}) => {
  const config = platformConfig[platform as keyof typeof platformConfig] || 
    { name: platform, icon: '📊', color: '#888888' };

  const formatHeatValue = (item: HotItemBase): string => {
    // 首先尝试使用 heat_value_numeric
    if (item.heat_value_numeric && item.heat_value_numeric > 0) {
      const num = item.heat_value_numeric;
      if (num >= 100000000) {
        return `${(num / 100000000).toFixed(1)}亿`;
      } else if (num >= 10000) {
        return `${(num / 10000).toFixed(1)}万`;
      } else {
        return String(num);
      }
    }
    
    // 如果没有 heat_value_numeric，尝试解析 heat_value
    const heat = item.heat_value;
    if (!heat || heat === '0') return '0';
    
    const heatStr = String(heat);
    
    // 如果已经是中文格式，直接返回
    if (heatStr.includes('万') || heatStr.includes('亿')) {
      return heatStr;
    }
    
    // 转换数字格式
    const num = parseInt(heatStr.replace(/,/g, ''), 10);
    if (isNaN(num)) return '0';
    
    if (num >= 100000000) {
      return `${(num / 100000000).toFixed(1)}亿`;
    } else if (num >= 10000) {
      return `${(num / 10000).toFixed(1)}万`;
    } else {
      return String(num);
    }
  };

  return (
    <Card 
      className="platform-column"
      title={
        <div className="platform-header">
          <span className="platform-icon">{config.icon}</span>
          <Title level={5} style={{ margin: 0, color: config.color }}>
            {config.name}
          </Title>
        </div>
      }
      size="small"
    >
      <List
        dataSource={items}
        renderItem={(item, index) => (
          <List.Item className="hot-item">
            <div className="hot-item-content">
              <div className="rank-number" style={{ color: config.color }}>
                {index + 1}
              </div>
              <div className="item-details">
                <div className="item-title" title={item.title}>
                  {item.title}
                </div>
                <div className="item-meta">
                  <Text type="secondary" className="heat-value">
                    {formatHeatValue(item)}热度
                  </Text>
                  <Space className="item-actions" size="small">
                    <Button 
                      type="text" 
                      size="small" 
                      icon={<EyeOutlined />}
                      onClick={() => onViewItem?.(item)}
                      title="查看详情"
                    >
                      查看
                    </Button>
                    <Button 
                      type="text" 
                      size="small" 
                      icon={<EditOutlined />}
                      onClick={() => onCreateContent?.(item)}
                      title="基于此话题创作"
                    >
                      创作
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </List.Item>
        )}
      />
    </Card>
  );
};